<template>
  <div class="detail">
    <detail-nav-bar class="detail-nav" />
    <!-- <scroll class="content"> -->
      <detail-swiper :top-images="topImages" />
      <detail-base-info :goods="goods" />
      <detail-shop-info :shop="shop" />
      <detail-goods-info :detail-info="detailInfo" />
      <detail-param-info :param-info="paramInfo" />
    <!-- </scroll> -->
  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar" 
  import DetailSwiper from "./childComps/DetailSwiper"
  import DetailBaseInfo from "./childComps/DetailBaseInfo"
  import DetailShopInfo from "./childComps/DetailShopInfo"
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo"
  import DetailParamInfo from "./childComps/DetailParamInfo"

  import Scroll from "components/common/scroll/Scroll"
  
  import {getDetail, Goods, Shop, GoodsParam} from "network/detail"

  export default {
    name: "Detail",
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamInfo
    },
    data () {
      return {
        iid: null,
        topImages: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {}
      }
    },
    created() {
      this.iid = this.$route.params.iid;
      console.log(this.iid);

      getDetail(this.iid) 
        .then(res => {
          console.log(res);
          const data = res.data.result;
          //1.获取顶部轮播图数据
          this.topImages = data.itemInfo.topImages;
          
          //2.获取商品信息
          this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services);

          //3.创建店铺信息的对象
          this.shop = new Shop(data.shopInfo);

          //4.保存商品的详情数据
          this.detailInfo = data.detailInfo;

          //5.获取参数信息
          this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);
        })
    }
  }

</script>

<style scoped>
  .detail{
    position: relative;
    z-index: 11;
    background-color: #FFF;
    height: 100vh;
  }
  .detail-nav{
    /* position: relative; */
    /* z-index: 11; */
  }
  .content{
    /* height: calc(100% - 44px); */
  }
</style>